<!DOCTYPE html>
<html>
	<head>
		<title>我的考勤(月汇总)</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0, user-scalable=no"/>
		<script src="js/flexible.js"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body class="Summary">
		<div id="myAttendanceMonthSummary">
			<div class="title">
				<div class="titleCont">
					<div class="headPortrait">
		  			<img onload="imgClass(event)" :src="headImg?imgUrl+headImg:'image/icon_group_normal.png'"/>
		  		</div>
		  		<div class="text">
		  			<p v-text="realName"></p>
		  		</div>
		  		<div class="time">
		  			选择日期：<span onclick="window.location.href = 'setDate';" v-text="attendDateText"></span>
		  		</div>
				</div>
			</div>
			<div v-show="notData">
				<div class="circularBg">
					<div class="circular">
						<p>出勤天数／应到天数</p>
						<div v-cloak>{{teamData.actualDay}}／{{teamData.shouldDay}}</div>
						<span v-cloak @click="toDaily" style="text-decoration:underline;">打卡明细</span>
					</div>
				</div>
				
				<ul class="attendanceList">
					<li>
						<b>正常打卡</b>
						<span>
							<i v-text="teamData.normal"></i>人
						</span>
					</li>
					<li>
						<b>异常打卡</b>
						<span>
							<i v-text="teamData.error"></i>人
						</span>
					</li>
					<li>
						<b>缺卡</b>
						<span>
							<i v-text="teamData.notAtten"></i>人
						</span>
					</li>
					<li>
						<b>请假</b>
						<span>
							<i v-text="teamData.leave"></i>天
							<!--<i>0</i>小时-->
						</span>
					</li>
					<li>
						<b>实到天数</b>
						<span>
							<i v-text="teamData.actualDay"></i>天
						</span>
					</li>
					<li>
						<b>应到考勤天数</b>
						<span>
							<i v-text="teamData.shouldDay"></i>天
						</span>
					</li>
					<!--<li>
						<b>外勤打卡</b>
						<span>
							<i>6</i>人
						</span>
					</li>-->
				</ul>
				<h5>外勤记录</h5>
				<ul class="record">
					<li v-for="item in teamData.attendRecordList">
						<p>
							<span v-text="item.time"></span>
						</p>
						<span>
							地址:
							<b v-text="item.attenAddr"></b>
						</span>
					</li>
					<!--<li>
						<p>
							<span>2017年4月19日</span>　
							<span>星期天14:30</span>
						</p>
						<span>
							地址:
							<b>深圳市龙岗区天安云谷</b>
						</span>
					</li>-->
				</ul>
			</div>	
		</div>	
		<script src="js/vue.min.js"></script>
		<script src="js/all.js" type="text/javascript" charset="utf-8"></script>
	  <script src="js/axios.min.js"></script>
	  <script src="js/message.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#myAttendanceMonthSummary",
				data:{
					teamData:{},
					attendDate:'',
					attendDateText:'',
					notData:false,
					realName:'',
					headImg:''
				},
				methods:{
					query:function(){
						axios.get(url+"/getWorkerAttenMonthCount",{
							params:{
								projectId:GetQueryString("projectId"),
								attendDate:this.attendDate,
								groupId:GetQueryString("groupId"),
								workerId:GetQueryString("workerId")
                               /* projectId:GetQueryString("projectId")||"0",
                                attendDate:this.attendDate,
                                groupId:GetQueryString("groupId")||"10639",
                                workerId:GetQueryString("workerId")||"670"*/
							},
							headers:{"token":GetQueryString("tokenData")}
                            //headers:{"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpdyI6IlR1ZSBBdWcgMTUgMTc6MTQ6MzAgQ1NUIDIwMTcifQ.S6k4iRxnqEKtoWT4DiSYEVchOAFy1VaivQM2nXoaORsuserId:679"}
						}).then(function(data){
							console.log(data)
							var oData = data.data.data;
							if (oData) {
								for (var i=0; i<oData.attendRecordList.length;i++) {
									oData.attendRecordList[i].time = new Date(oData.attendRecordList[i].attenTime).toLocaleString(true)
								}
								this.teamData = oData;
								this.notData = true
							}else{
								this.notData = false
							}
						}.bind(this))
					},
					toDaily:function(){
						var oDate = this.attendDate//GetQueryString("attendDate")
						window.location.href = 'onLookInfo?date='+oDate;
					},
					setDate:function(date){
						this.attendDate = date;
						this.attendDateText = replaceDate("y-m",date)
						this.query();
					}
				},
				mounted:function(){
			  	this.$nextTick(function(){   // 文档加载后调用
			  		var today = new Date();   // 获取当前时间
						var time = today.format('yyyy-MM');  //格式化时间
						this.attendDate = time;
						this.attendDateText = replaceDate("y-m")//时间转换为年月日格式
			  		this.query()
			  		this.realName = GetQueryString('realName');
			  		this.headImg = GetQueryString('headImg');
					});
			  }
			})
		</script>
	</body>
</html>
